
import React from 'react';
import {Dimensions,Animated,View,Image,StyleSheet,Easing,TouchableOpacity} from 'react-native'

export default class AnimatedTurnTableDrawPage extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      offOn:true,
      rotateDeg:new Animated.Value(0),
    };
  }
  rotateImg=()=>{
    if(this.state.offOn){
      this.setState({
        offOn:!this.state.offOn,
        rotateDeg:new Animated.Value(0),
      },()=>{
        this.rotateImg1();
      });
    }
  };

  rotateImg1=()=>{
    // let number=Math.ceil(Math.random()*8);
    let number=1;
    // if((number/8)===0.875){
    //   number=1;
    // }
    let  oneTimeRotate=number/8+1;
    console.log(oneTimeRotate,'oneTimeRotate');
    Animated.timing(this.state.rotateDeg, {
      toValue: oneTimeRotate,
      duration: 2000,
      easing: Easing.out(Easing.linear),
    }).start(()=>{

      this.setState({
        offOn:!this.state.offOn,
      });
      //动画结束时，会把toValue值，回调给callback

      this.state.rotateDeg.stopAnimation((oneTimeRotate)=>{
        this.changeValue(oneTimeRotate);
      })});
  };

  changeValue=(number)=>{
    alert("可以根据"+number+"的值，进行相关计算");
  };


  render() {
    return (
      <View style={styles.container}>
        <Animated.Image
          source={require('./assets/zhuanpan.png')}
          style={[styles.mainImg,{transform: [
              {
                rotate: this.state.rotateDeg.interpolate({
                  inputRange: [0, 0.125,0.25,0.375,0.5,0.625,0.75,0.825,1,1.125,1.25,1.375,1.5,1.625,1.75,1.825,2],
                  outputRange: ['0deg','45deg','90deg','135deg','180deg','225deg','270deg','315deg','360deg','405deg','450deg','495deg','540deg','585deg','630deg','675deg','720deg']
                })
              }]}]}>
        </Animated.Image>
        <TouchableOpacity onPress={()=>{this.rotateImg()}} style={styles.centerPoint}>
          <Image source={require('./assets/zhizhen.png')} style={styles.imgPoint}/>
        </TouchableOpacity>

      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  imgPoint:{
    width:400,
    height:400,
  },
  centerPoint:{
    position:'absolute',
    left:0,
    top:0,
  },
  mainImg:{
    width:400,
    height:400,
    alignItems:'center',
    justifyContent:'center',
    resizeMode:'contain',
    position:'relative'
  }
});
